<template>
	<view class="zone">
		<Header :title="name"></Header>
		<!-- 次数 -->
		<view class="home_right" v-if="coin == 0&&id!=5">
			<view class="home_nav1">今日剩余:<text>{{left_times}}</text>次</view>
		</view>
		<!-- 铜钱 -->
		<view class="home_right" v-else-if="coin == 1">
			<view class="home_nav">
				<image class="home_navimg" src="http://image.qxgm.site/tdz/img/tk/mg-04.png" mode="widthFix"
					style="top: -2px;"></image>
				<text class="home_num">{{userinfo.tongqian}}</text>
			</view>
		</view>

		<!-- 灵石 -->
		<view class="home_right" v-else-if="coin == 2">
			<view class="home_nav">
				<image class="home_navimg" src="http://image.qxgm.site/tdz/img/tk/mg-03.png" mode="widthFix"
					style="top: -1px;"></image>
				<text class="home_num">{{userinfo.lingshi}}</text>
			</view>
		</view>
		<!-- 神石 -->
		<view class="home_right" v-else-if="coin == 3">
			<view class="home_nav">
				<image class="home_navimg" src="http://image.qxgm.site/tdz/img/tk/mg-01.png" mode="widthFix"
					style="top: -1px;"></image>
				<text class="home_num">{{userinfo.shenshi}}</text>
			</view>
		</view>
		<!-- 零钱 -->
		<view class="home_right" v-else-if="coin == 4">
			<view class="home_nav">
				<image class="home_navimg" src="http://image.qxgm.site/tdz/img/tough/jingli.png" mode="widthFix">
				</image>
				<text class="home_num">{{userinfo.money}}</text>
			</view>
		</view>
		<!-- 精力值 -->
		<view class="home_right" v-else-if="coin == 5">
			<view class="home_nav">
				<image class="home_navimg" src="http://image.qxgm.site/tdz/img/tough/jingli.png" mode="widthFix">
				</image>
				<text class="home_num">{{userinfo.jingli}}</text>
				<image class="home_more" src="http://image.qxgm.site/tdz/img/public/mg-04.png" mode="widthFix"
					@click="refinefun">
				</image>
			</view>
		</view>
		<view class="main">
			<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
			<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
			<view class="box">
				<view class="list">
					<block v-for="(item,index) in list">
						<view :class="['item','classlist'+index,item.is_open == 0?'filt':'']" mode="widthFix">
							<view class="ashengy" v-if="coin == 0&&id==5">
								今日剩余：{{item.times-item.use_times}}次
							</view>
							<image src="http://image.qxgm.site/tdz/img/tk/477.png" mode="widthFix" class="suo"
								v-if="item.is_open == 0">
							</image>
							<view class="title">{{item.name}} <text class="coldo"
									v-if="item.suggest_fight>0">(建议战力:{{item.suggest_fight}})</text></view>
							<view class="btnbox">
								<view class="btn">
									<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
										class="btnNotice1" @click="lookbtn(item)">查看掉落</u-button>
								</view>
								<view class="btn">
									<view class="nunmbox">
										<view class="book" v-if="coin != 0">
											<view class="num" v-if="coin == 1">消耗{{dealWith(item.coin_num)}}{{title}}
											</view>
											<view class="num" v-else>消耗{{item.coin_num}}{{title}}</view>
										</view>
										<view class="num2" v-if="item.is_open == 0">{{item.info}}</view>
									</view>


									<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
										class="btnNotice2" @click="searchbtn(item)">探索</u-button>

								</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>

		<!-- 次数不足 -->
		<u-mask :show="refine">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info" style="min-height: 150px;">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>恢复精力</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop2">
							<!-- <view class="tboan">
								<image class="tbimg" src="http://image.qxgm.site/tdz/img/tk/tk.png" mode="widthFix">
								</image>
								<view class="uoan">
									<view class="an1">
										看广告恢复精力
									</view>
									<view class="an2">
										点击左侧图标，每日限制次数
									</view>
								</view>
								<view class="num">今日<text>{{use_times}}</text>/{{max_times}}</view>
							</view> -->
							<view class="tboan">
								<image class="tbimg" src="http://image.qxgm.site/tdz/img/daolv/smg-03.png"
									mode="widthFix"></image>
								<view class="uoan">
									<view class="an1">
										使用精力丹恢复精力
									</view>
									<view class="an2">
										每个精力丹恢复10点精力
									</view>
								</view>
								<view>
									<view class="num">持有<text
											v-if="jinglilist.length!=0">{{Math.floor(jinglilist.props[0].number)}}</text>
									</view>
									<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
										class="refineCon3" @click="shiyong(jinglilist)">使用</u-button>
								</view>

							</view>
						</view>
					</view>
				</view>
				<image class="m_close" @click="refine = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask>
		<!-- 恭喜获得 -->
		<u-mask :show="obtain" @click="obtain = false">
			<view class="warp2" @tap.stop>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/youchai/mg-7.png" mode="widthFix"></image>
				<view class="mask_content2">
					<view class="m_info2">
						<view class="plist">
							<view v-if="goods.coin">
								<view class="parts" v-if="goods.coin.name == 'tongqian'">
									<view class="sbimg" style="padding: 6px 5px;">
										<image class="tanimg" src="http://image.qxgm.site/tdz/img/tk/mg-04.png"
											mode="widthFix">
										</image>
									</view>
									<view class="toan">
										铜钱x{{goods.coin.num}}
									</view>
								</view>
								<view class="parts" v-if="goods.coin.name == 'lingshi'">
									<view class="sbimg" style="padding: 6px 5px;">
										<image class="tanimg" src="http://image.qxgm.site/tdz/img/tk/mg-03.png"
											mode="widthFix">
										</image>
									</view>
									<view class="toan">
										灵石x{{goods.coin.num}}
									</view>
								</view>
								<view class="parts" v-if="goods.coin.name == 'shenshi'">
									<view class="sbimg" style="padding: 6px 5px;">
										<image class="tanimg" src="http://image.qxgm.site/tdz/img/tk/mg-01.png"
											mode="widthFix">
										</image>
									</view>
									<view class="toan">
										神石x{{goods.coin.num}}
									</view>
								</view>
								<view class="parts" v-if="goods.coin.name == 'money'">
									<view class="sbimg" style="padding: 6px 5px;">
										<image class="tanimg" src="http://image.qxgm.site/tdz/img/active/3.png"
											mode="widthFix">
										</image>
									</view>
									<view class="toan">
										零钱x{{goods.coin.num}}
									</view>
								</view>
							</view>
							<block v-for="(item,index) in goods.props" :key="index">
								<view class="parts">
									<view class="sbimg">
										<image class="tanimg" :src="item.img" mode="widthFix">
										</image>
									</view>
									<view class="toan">
										{{item.name}}x{{item.num}}
									</view>
								</view>
							</block>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="refineCon2" @click="closeObtain">确定</u-button>
					</view>
				</view>
				<image class="mask3" src="http://image.qxgm.site/tdz/img/youchai/mg-9.png" mode="widthFix"></image>
				<view class="dianjireny" @click="closeObtain">
					点击任意位置退出
				</view>
			</view>
		</u-mask>

		<!-- 秘境掉落 -->
		<u-mask :show="choose" :zoom='false'>
			<view :class="['warp3',choose==true?'showHandler':'hideHandler'] ">
				<image class="yun_mask" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>
				<view class="mask_content3">
					<view class="m_info3">
						<view class="title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
							<text>秘境掉落</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
						</view>
						<scroll-view scroll-y="true" class="gundong">
							<view class="caolist">
								<block v-for="(item,index) in mijingList" :key="index">
									<view class="link">
										<view class="cparts">
											<image class="cq1" :src="item.img" mode="widthFix"></image>
										</view>
										<view class="cname">
											{{item.name}}
										</view>
									</view>
								</block>

							</view>
						</scroll-view>

					</view>
				</view>
				<image class="m_close3" @click="choose = false" src="http://image.qxgm.site/tdz/img/public/cha.png"
					mode="widthFix" />
			</view>
		</u-mask>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				userinfo: {},
				refine: false,
				id: '',
				name: '',
				left_times: '',
				coin: '',
				title: '',
				obtain: false,
				goods: {},
				mijingList: [],
				choose: false,
				jinglilist: [],
				use_times: '',
				max_times: '',
			};
		},

		onLoad(option) {
			this.name = option.name
			this.id = option.id;
			this.fbareafun()
			this.getUserInfo();
		},
		methods: {
			refinefun() {
				this.jingli()
				this.refine = true
			},
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
				}
			},
			// 数量过万处理
			dealWith(value) {
				value = Number(value)
				var num;
				if (value > 99999) {
					num = (Math.floor(value / 100) / 100) + '万';
				} else if (value <= 99999 && value > -99999) {
					num = Math.floor(value)
				} else if (value < -99999) { //小于-9999显示-x.xx万
					num = -(Math.floor(Math.abs(value) / 100) / 10) + '万'
				}
				return num;
			},
			//关卡列表
			async fbareafun() {
				let res = await this.$http.index.fbarea({
					fuben_id: this.id
				})
				if (res.code == 1) {
					this.list = res.data
					this.coin = res.data[0].coin
					this.title = this.coin == 0 ? '次' : this.coin == 1 ? '铜钱' : this.coin == 2 ? '灵石' : this.coin ==
						3 ? '神石' : this.coin == 4 ? '零钱' : '精力值'
					if (this.coin == 0) {
						this.left_times = res.data[0].times - res.data[0].use_times
					}

				}
			},
			//探索
			async searchbtn(item) {
				if (item.is_open == 0) {
					this.$u.toast('该场景暂未开放!')
					return
				}

				if (this.id != 5 && this.coin == 0 && this.left_times == 0) {
					this.$u.toast('次数不足!')
					return
				}
				if (this.id == 5 && this.coin == 0 && (item.times - item.use_times) <= 0) {
					this.$u.toast('次数不足!')
					return
				}

				let res = await this.$http.index.mjsearch({
					fuben_id: this.id,
					area_id: item.id
				})

				if (res.code == 1) {
					this.goods = res.data
					this.obtain = true
					this.fbareafun()
					this.getUserInfo()
				} else {
					this.$u.toast(res.msg)
				}
			},
			//查看掉落
			async lookbtn(item) {
				let res = await this.$http.index.detaillogs({
					area_id: item.id
				})
				if (res.code == 1) {
					this.mijingList = [...res.data.faqi, ...res.data.kit, ...res.data.props]
					this.choose = true
				}
			},
			// 获取个人信息
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				if (res.code == 1) {
					this.userinfo = res.data
				}
			},
			//精力弹框
			async jingli() {
				let res = await this.$http.index.jingli()
				if (res.code == 1) {
					this.jinglilist = res.data
					this.use_times = res.data.ad.use_times
					this.max_times = res.data.ad.max_times

				}
			},
			//使用精力丹
			async shiyong(item) {
				if (item.props[0].number == 0) {
					this.$u.toast('暂无精力丹!')
					return
				}
				let res = await this.$http.index.usejingli({
					props_id: item.props[0].id
				})
				this.$u.toast(res.msg)
				if (res.code == 1) {
					this.jingli()
					this.getUserInfo()
					this.refine = false
				}
			},
			// 关闭恭喜获得弹框
			closeObtain() {
				this.obtain = false
				setTimeout(() => {
					this.goods = {}
				}, 200)
			}
		},
	}
</script>

<style lang="less">
	.warp3 {
		width: 100%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.showHandler {
		animation: showHandler 0.8s forwards ease;
	}

	.hideHandler {
		animation: hideHandler 0.8s forwards ease;
	}

	@keyframes showHandler {
		0% {
			bottom: -50%;
		}

		100% {
			bottom: 0%;
		}
	}

	@keyframes hideHandler {
		0% {
			bottom: 0%;
		}

		100% {
			bottom: -50%;
		}
	}

	.yun_mask {
		position: absolute;
		left: 0;
		top: -11%;
		width: 43%;
		z-index: 9;
	}

	.m_close3 {
		position: absolute;
		top: -5%;
		right: 8px;
		width: 32px;
	}

	.mask_content3 {
		.m_info3 {
			padding: 0% 6px 10px;
			box-sizing: border-box;
			display: block;
			margin: 1px auto;
			width: 100%;
			background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
			background-size: 100% auto;
			min-height: 280px;
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: center;
			background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
			background-size: 100% 100%;
			padding: 0px 0 6px;

			image {
				width: 18%;
			}

			text {
				font-size: 20px;
				font-weight: normal;
				color: #50463E;
				line-height: 20px;
				margin: 0 13px;
			}
		}
	}

	.classlist0 {
		background: url(http://image.qxgm.site/tdz/img/realm/0.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.classlist1 {
		background: url(http://image.qxgm.site/tdz/img/realm/1.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.classlist2 {
		background: url(http://image.qxgm.site/tdz/img/realm/2.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.classlist3 {
		background: url(http://image.qxgm.site/tdz/img/realm/3.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.classlist4 {
		background: url(http://image.qxgm.site/tdz/img/realm/4.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.classlist5 {
		background: url(http://image.qxgm.site/tdz/img/realm/5.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.classlist6 {
		background: url(http://image.qxgm.site/tdz/img/realm/6.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.classlist7 {
		background: url(http://image.qxgm.site/tdz/img/realm/7.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.classlist8 {
		background: url(http://image.qxgm.site/tdz/img/realm/8.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.classlist9 {
		background: url(http://image.qxgm.site/tdz/img/realm/9.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.classlist10 {
		background: url(http://image.qxgm.site/tdz/img/realm/10.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.classlist11 {
		background: url(http://image.qxgm.site/tdz/img/realm/11.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.gundong {
		height: 240px;
		background: url(http://image.qxgm.site/tdz/img/daolv/mg-02.png) no-repeat;
		background-size: 100% 100%;
	}

	.ashengy {
		position: absolute;
		top: 6px;
		right: 6px;
		font-size: 13px;
		color: #fff;
	}

	.caolist {
		display: flex;
		flex-wrap: wrap;
		padding: 5px 7px;

		.link {
			position: relative;
			width: 20%;
			margin-bottom: 10px;
		}

		.cparts {
			position: relative;
			background: url(http://image.qxgm.site/tdz/img/liandan/tanbg.png) no-repeat;
			background-size: 100% 100%;
			padding: 7px 11px;
			box-sizing: border-box;
		}

		.cpart::after {
			position: absolute;
			content: '';
			width: 100%;
			height: 100%;
			background: url(http://image.qxgm.site/tdz/img/liandan/tanbg2.png) no-repeat;
			background-size: 100% 100%;
			top: 0;
			left: 0;
		}

		.cq1 {
			width: 100%;
		}

		.cq2 {
			width: 94%;
			text-align: center;
			position: absolute;
			bottom: 4px;
			left: 50%;
			transform: translateX(-50%);
			font-size: 12px;
			font-weight: normal;
			color: #FFFEFE;
			line-height: 20px;
			text-shadow: 0 1px 1px #000;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-18.png) no-repeat;
			background-size: 100% 100%;
		}

		.cq3 {
			width: 42px;
			height: 20px;
			position: absolute;
			text-align: center;
			top: -5px;
			left: -7px;
			font-size: 12px;
			font-weight: normal;
			color: #FFFFFF;
			line-height: 20px;
			zoom: 0.92;
			text-shadow: 0 1px 1px #653333;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-10.png) no-repeat;
			background-size: 100% 100%;
		}


		.cname {
			font-size: 12px;
			font-weight: normal;
			color: #333;
			line-height: 14px;
			margin-top: 4px;
			text-align: center;
		}

	}

	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.main {
		width: 100%;
		position: relative;
		margin-top: 10px;

		.yun {
			position: absolute;
			top: -3%;
			left: 0;
			width: 44%;
			z-index: 9;
		}

		.ping1 {
			width: 100%;
			display: flex;
		}
	}

	.filt {
		filter: grayscale(85%);
	}

	.box {
		background: url(http://image.qxgm.site/tdz/img/liandan/mbg.png) no-repeat;
		background-size: 100% auto;
		padding: 10px 6px 5px;
		box-sizing: border-box;

		.list {
			height: calc(100vh - 112px);
			overflow-y: scroll;
		}

		.item {
			padding: 15px 15%;
			box-sizing: border-box;
			text-align: center;
			position: relative;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			margin-bottom: 10px;

			.suo {
				width: 12%;
				position: absolute;
				left: 0;
				top: 0;
			}

			.title {
				// width: 132px;
				height: 26px;
				line-height: 28px;
				background: url(http://image.qxgm.site/tdz/img/tk/488.png) no-repeat;
				background-size: 100% 100%;
				margin: auto;
				font-size: 15px;
				color: #ffffff;

				.coldo {
					color: #FFFF66;
				}
			}

			.btnbox {
				display: flex;
				justify-content: space-between;
				margin-top: 30px;

				.btn {
					position: relative;

					.nunmbox {
						position: absolute;
						bottom: 35px;
						display: flex;
						flex-direction: column;
						align-items: center;
						z-index: 9;
						width: 100%;
					}

					.num {
						color: #FAF8BC;
						font-size: 10px;
						text-shadow: 0 1px 1px #000000;
					}

					.num2 {
						color: #FAF8BC;
						font-size: 12px;
						text-shadow: 0 1px 1px #000000;
						zoom: 0.92;
					}
				}
			}
		}
	}


	.jihuop2 {
		padding: 0 7%;

		.red {
			color: #FF461D;
		}


		.tboan {
			display: flex;
			justify-content: space-between;
			background: url(http://image.qxgm.site/tdz/img/daolv/mg-01.png) no-repeat;
			background-size: 100% 100%;
			padding: 5px 10px;
			margin-top: 2vh;
		}

		.tbimg {
			width: 22%;
			background: url(http://image.qxgm.site/tdz/img/equipment/mg-03.png) no-repeat;
			background-size: 100% 100%;
			padding: 4px 6px 7px 6px;
			box-sizing: border-box;
		}

		.uoan {
			flex: 1;
			margin-left: 5px;
			width: 50%;
		}

		.an1 {
			font-size: 16px;
			font-weight: normal;
			color: #333333;
			line-height: 18px;
			margin-bottom: 11px;
			margin-top: 5px;
		}

		.an2 {
			font-size: 12px;
			font-weight: normal;
			color: #666666;
			line-height: 14px;
		}

		.num {
			color: #333333;
			font-size: 14px;
			margin-top: 5px;

			text {
				color: #FF6600;
			}
		}
	}

	.btnNotice1 {
		width: 90px;
		height: 33px;
		font-size: 14px;
		font-weight: normal;
		line-height: 33px;
		color: #fdf2c5;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/lan.png) no-repeat;
		background-size: 100% 100%;
	}

	.btnNotice2 {
		width: 90px;
		height: 33px;
		font-size: 14px;
		font-weight: normal;
		line-height: 33px;
		color: #fdf2c5;
		text-align: center;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/btn7.png) no-repeat;
		background-size: 100% 100%;
	}

	// #ifdef H5
	.home_right {
		position: absolute;
		top: 24px;
		right: 18px;
		z-index: 999;
		min-width: 90px;
	}

	// #endif

	// #ifdef APP-PLUS
	.home_right {
		position: absolute;
		top: 44px;
		right: 18px;
		z-index: 999;
		min-width: 90px;
	}

	// #endif



	.home_nav1 {
		background: url(http://image.qxgm.site/tdz/img/tk/466.png) no-repeat;
		background-size: 100% 100%;
		color: #ffffff;
		padding: 7px 12px;
		box-sizing: border-box;
		font-size: 12px;
		text-shadow: 0 1px 1px #000000;

		text {
			color: #FFF000;
		}
	}

	.home_nav {
		position: relative;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: url(http://image.qxgm.site/tdz/img/public/btn1.png) no-repeat;
		background-size: 100% 100%;
		margin-bottom: 5px;
		padding: 2px 3px 2px 30px;
		box-sizing: border-box;
	}

	.home_navimg {
		position: absolute;
		width: 28px;
		top: -4px;
		left: -3px;
	}

	.home_num {
		font-size: 12px;
		font-weight: normal;
		color: #fff;
		text-align: center;
	}

	.home_more {
		width: 18px;
	}


	.m_info2 {
		.plist {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-wrap: wrap;
			margin-top: 14px;

			.parts {
				margin: 0 2px;
				box-sizing: border-box;
			}

			.sbimg {
				width: 64px;
				padding: 2px 5px;
				background: url(http://image.qxgm.site/tdz/img/liandan/mg-12.png) no-repeat;
				background-size: 100% 100%;
				margin: auto;
			}

			.tanimg {
				width: 100%;
			}

			.toan {
				font-size: 12px;
				font-weight: normal;
				color: #333333;
				line-height: 14px;
				margin-top: 12px;
				text-align: center;
			}

		}

	}

	.refineCon2 {
		display: block;
		margin: 23px auto 0;
		width: 116px;
		font-size: 18px;
		height: 37px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 37px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}

	.refineCon3 {
		display: block;
		margin: 4px auto 0;
		width: 60px;
		text-align: center;
		font-size: 13px;
		padding: 0;
		height: 30px;
		font-weight: normal;
		color: #f9e5b6;
		line-height: 30px;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/liandan/mg-06.png) no-repeat;
		background-size: 100% 100%;
	}
</style>